<template>
    <div class="add-patent-container detailsPageBox">
            <div class="container-top detailsMain">
                <div class="title">基本信息</div>
                <el-form :model="form" label-width="80px" :rules="formRule" ref="patentDom">
                    <el-form-item label="专利号:" class="form-width" prop="patentNo" placeholder="请输入专利号">
                        <el-input v-model="form.patentNo" @change="searchBlur" />
                    </el-form-item>
                    <el-form-item label="专利名称:">
                        <div>{{ form.patentName }}</div>
                    </el-form-item>
                    <el-form-item label="专利摘要:">
                        <div>{{ form.patentDesc }}</div>
                    </el-form-item>
                    <el-form-item label="专利标题:" class="form-width" prop="dynamicTitle" placeholder="请输入专利标题">
                        <el-input v-model="form.dynamicTitle" />
                    </el-form-item>
                    <el-form-item label="所属领域:" class="form-width" prop="domain">
                        <el-select v-model="form.domain">
                            <el-option label="请选择" value="" />
                            <el-option :label="domain.keyName" :value="domain.keyId"
                                v-for="domain in data.domainSelectList" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="是否启用:" class="form-width">
                        <el-radio-group v-model="form.valid">
                            <el-radio :label="true">是</el-radio>
                            <el-radio :label="false">否</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="是否热门:" class="form-width">
                        <el-radio-group v-model="form.isHot">
                            <el-radio :label="true">是</el-radio>
                            <el-radio :label="false">否</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-form>
            </div>
            <div class="container-bottom detailsHandBtn">
            <el-button type="primary" style="width:100px;height:36px" @click="send">提交</el-button>
            <el-button style="width:100px;height:36px">重置</el-button>
        </div>
    </div>
</template>

<script setup>
import { onMounted, reactive, ref, onUnmounted, computed } from 'vue'
import { getDomainApi } from '@/api/public/publicDict.js'
import { searchPatentApi, addPatentApi } from '@/api/interface/patent.js'


import { ElMessage, ElMessageBox } from 'element-plus'
import {backRoute} from '@/utils/common.js'
import { useStore } from 'vuex'
import { useRouter, useRoute } from 'vue-router'
const store = useStore()
const router = useRouter()
const route = useRoute()

const patentDom = ref(null)



onMounted(() => {
    const level = router.currentRoute.value.meta.level
    store.dispatch('setting/setRouterCut', level)
})
onUnmounted(() => {
    store.dispatch('setting/setRouterCut', 2)
})



const form = reactive({
    patentNo: '',
    patentName: '',
    patentDesc: '',
    dynamicTitle: '',
    domain: '',
    valid: false,
    isHot: false,
})
const formRule = reactive({
    patentNo: {
        required: true,
        validator: (rule, value, callback) => {
            if (/^[a-zA-Z0-9]{5,20}$/.test(value) == false) {
                callback(new Error('请输入正确的专利号'))
            } else {
                callback()
            }
        },
        trigger: 'blur',
    },
    dynamicTitle: {
        required: true,
        validator: (rule, value, callback) => {
            if (/^[\u4e00-\u9fa5/a-zA-Z0-9]{2,30}$/.test(value) == false) {
                callback(new Error('请输入正确的专利标题'))
            } else {
                callback()
            }
        },
        trigger: 'blur',
    },
    domain: {
        required: true,
        validator: (rule, value, callback) => {
            if (/^[0-9]{1,6}$/.test(value) == false) {
                callback(new Error('请输入选择专利所属领域'))
            } else {
                callback()
            }
        },
        trigger: ['blur', 'change'],
    },

})
const data = reactive({
    domainSelectList: [],
})




//获取一级领域
const getDomain = () => {
    getDomainApi({ parentId: 0 }).then((res) => {
        if (res.status === 200) {
            data.domainSelectList = res.data
        }
    })
}
getDomain()
//查询专利
const searchBlur = () => {
    searchPatentApi({ pn: form.patentNo }).then(res => {
        if (res.status === 200) {
            const patent = res.data.plist[0]
            form.patentName = patent.ttl;
            form.patentDesc = patent.abst;
        }
    })
}



//提交
const send = async () => {
    const a = await patentDom.value.validate((bool) => {
        return bool
    })
    if (!a) return
    const params = {
        dynamicTitle: form.dynamicTitle,
        industryCodeOne: form.domain,
        industryNameOne: data.domainSelectList.find(v => v.keyId == form.domain).keyName,
        isHot: form.isHot,
        patentAbst: form.patentDesc,
        patentPn: form.patentNo,
        patentTitle: form.patentName,
        valid: form.valid,
    }

    addPatentApi(JSON.stringify(params)).then(res => {
        if (res.status === 200) {
            ElMessage({
                message: res.message,
                type: 'success',
            })
backRoute('Patent')
        }
    })
}

</script>

<style lang="scss" scoped>
.el-select-dropdown__list {
    .el-select-dropdown__item {
        font-size: 12px;
    }
}

.add-patent-container {
    display: flex;
    flex-direction: column;
    padding: 20px;
    .container-top{
        flex: 1;
    }
    .container-bottom {
        text-align: center;
        height: 36px;
    }

    .title {
        font-weight: 700;
        margin-bottom: 20px;
    }

    .form-width {
        width: 36%;
    }

    :deep(.el-form-item__content) {
        font-size: 12px;
    }
}
</style>